<template>
    <div id="tui-image-editor"></div>
</template>

<script>
    import "tui-image-editor/dist/tui-image-editor.css";
    import "tui-color-picker/dist/tui-color-picker.css";
    const ImageEditor = require("tui-image-editor");

    export default {
        name: "EditImg",
        data() {
            return {
                instance: null,
                imgSrc: "src/renderer/assets/logo.png"
            }
        },
        mounted() {
            this.instance = new ImageEditor(
                document.querySelector("#tui-image-editor"),
                {
                    includeUI: {
                        loadImage: {
                            path: this.imgSrc,
                            name: "image"
                        },
                        initMenu: "draw",
                        menuBarPosition: "bottom"
                    },
                }
            );
        },
        beforeMount() {
            this.imgSrc = this.$route.query.src
            console.log(this.$route.query.src)
        }
    }
</script>

<style scoped>

</style>